<template>
  <div class="home">
    <h1 class="page-title">最新博客文章</h1>
    
    <div class="article-list">
      <ArticleCard 
        v-for="(article, index) in articles" 
        :key="article.id"
        :article="article"
        :isReverse="index % 2 !== 0"
        @click="handleArticleClick"
      />
    </div>
    
    <div class="pagination" v-if="total > 0">
      <a-pagination
        :current="current"
        :total="total"
        :pageSize="pageSize"
        @change="handlePageChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { getArticleList } from '@/api/article';
import ArticleCard from '@/components/ArticleCard.vue';

const router = useRouter();
const articles = ref([]);
const current = ref(1);
const pageSize = ref(5);
const total = ref(0);

const fetchArticles = async () => {
  try {
    const res = await getArticleList({ 
      pageNum: current.value, 
      pageSize: pageSize.value 
    });
    articles.value = res.records;
    total.value = res.total;
  } catch (error) {
    console.error('获取文章列表失败', error);
  }
};

onMounted(() => {
  fetchArticles();
});

const handlePageChange = (page) => {
  current.value = page;
  fetchArticles();
};

const handleArticleClick = (article) => {
  router.push(`/article/${article.id}`);
};
</script>

<style scoped>
.home {
  padding: 20px;
}

.page-title {
  margin-bottom: 30px;
  color: #333;
  text-align: center;
  font-size: 2rem;
  position: relative;
}

.page-title:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(to right, #42b983, #64b5f6);
}

.article-list {
  margin: 40px 0;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
</style> 